<script setup>
    import * as echarts from 'echarts'
    import {onMounted} from "vue";
    import {ref} from "vue";
    import chartApi from "@/api/chart.js";
    import dateUtil from '@/utils/dateUtil.js';

    const chartRef = ref()

    onMounted(() => {
        //echarts.init(document.getElementById('myChart'));
        const myChart = echarts.init(chartRef.value);
        chartApi.selectUserCount().then((result) => {
            if (result.code == 0) {
                const days = dateUtil.getMonthDays();
                const counts = new Array(days.length).fill(0);
                debugger
                for (let i = 0; i < days.length; i++) {
                    for (let item of result.data) {
                        if (item.day == days[i]) {
                            counts[i] = item.count;
                        }
                    }

                    days[i] = days[i].substring(8);
                }

                const option = {
                    title: {
                        text: '用户本月增长数量',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: counts,
                            type: 'line',
                            smooth: true
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    })

</script>

<template>
	<div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<style scoped>

</style>